<template>
	<div class="endLive">
		<!-- 	<i></i>
		  {{ liveInfo.status === 2 ? "直播中" : "" }}
		  {{ liveInfo.status ===1 ? "未开始" : ""
		  }}{{ liveInfo.status === 3 ? "直播结束" : "" }}
		  {{ liveInfo.status === 4 ? "已过期" : "" }}
		  {{ liveInfo.status === 5 ? "暂停中" : "" }}
		  </span
		>
		{{ liveInfo.startTime }} ~ {{ liveInfo.endTime }} -->



		<div class="endLiveCont">
			<image src="@/static/image/user/bj.png" mode="" class="bjImg"></image>
			<div class="endLiveCenter">
				<div class="endLiveCont_back">
					<u-navbar leftText="详情" @leftClick="appFinish" leftIconColor="#1D2129"  bgColor="transparent">
			        </u-navbar>
				</div>

				<div class="liveLine" v-if="isShowLive">
					<div class="liveLineClose" @click='closeEvnet'>
						<image src="@/static/image/close.png" mode=""></image>
					</div>
					<div class="liveLineText">
						更多数据详情请前往PC管理端查看
					</div>
					<div class="liveLineCopy" @click='copy'>
						复制链接
					</div>
				</div>

				<!-- 	<div class="endLiveCont_back" @click='backEvent'>
					<image src="@/static/image/endLive/left.png" mode=""></image>
				</div>
				<div class="endLiveText">
					{{ liveInfo.status === 2 ? "直播中" : "" }}
					{{ liveInfo.status ===1 ? "未开始" : ""
					}}{{ liveInfo.status === 3 ? "直播结束" : "" }}
					{{ liveInfo.status === 4 ? "已过期" : "" }}
					{{ liveInfo.status === 5 ? "暂停中" : "" }}
				</div> -->
				<div class='liveData'>

					<!-- <div class="endLiveTime">
						直播时长：{{ liveInfo.startTime }} ~ {{ liveInfo.endTime }}
					</div>
					<div class="endLiveTimeMin" v-if="liveTime">
						共{{liveTime}}
					</div> -->
					<div class='liveDataItems'>
						<div class='liveDataItemsImg'>
							<image :src="liveInfo.cover" mode=""></image>
						</div>
						<div class='liveDataItemsCont'>
							<div class='liveDataItemsContTop ex'>
								{{ liveInfo.name }}
							</div>
							<div class='liveDataItemsContCenter'>
								直播时长：{{ liveInfo.startTime | timeFilter }} ~ {{ liveInfo.endTime | timeFilter }}
							</div>
							<div class='liveDataItemsContBottom'>
								共{{ liveTime }}
							</div>
						</div>
					</div>



					<!-- const -->
					<div class="liveContBox">
						<div class="liveContBox_top">
							<div class="liveContBox_top_left">
								观看互动
							</div>
							<div class="liveContBox_top_right" @click='userEvent(1)'>
								观众列表 <image src="@/static/image/endLive/right.png" mode=""></image>
							</div>
						</div>
						<div class="liveContBoxItemsCont">
							<div class='liveContBoxItems'>
								<div class="liveContBoxItems_top">
									{{ overviewData.browseUv }}
								</div>
								<div class="liveContBoxItems_text">
									观看人数
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ overviewData.browsePv }}
								</div>
								<div class="liveContBoxItems_text">
									观看人次
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ overviewData.addBrowseUv }}
								</div>
								<div class="liveContBoxItems_text">
									新增用户
								</div>
							</div>
							<div class='liveContBoxItems'>
								<div class="liveContBoxItems_top">
									{{
										overviewData.peakOnlineNum > overviewData.browseUv
										? overviewData.browseUv
										: overviewData.peakOnlineNum
									}}
								</div>
								<div class="liveContBoxItems_text">
									峰值在线人数
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ overviewData.commentUv }}
								</div>
								<div class="liveContBoxItems_text">
									评论人数
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ overviewData.likePv }}
								</div>
								<div class="liveContBoxItems_text">
									点赞次数
								</div>
							</div>
						</div>
					</div>

					<!-- const -->
					<div class="liveContBox">
						<div class="liveContBox_top">
							<div class="liveContBox_top_left">
								成交数据
							</div>
							<div class="liveContBox_top_right" @click='userEvent(2)'>
								<image src="@/static/image/endLive/hot.png" mode="" class="liveContBox_huo"></image>
								商品热销榜
								<image src="@/static/image/endLive/right.png" mode="">
								</image>
							</div>
						</div>
						<div class="liveContBoxItemsCont">
							<div class='liveContBoxItems'>
								<div class="liveContBoxItems_top">
									{{ productCountData.totalPayAmount || 0.00 }}
								</div>
								<div class="liveContBoxItems_text">
									总成交额
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ productCountData.totalPayNum || 0.00 }}
								</div>
								<div class="liveContBoxItems_text">
									总订单数
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ overviewData.productClickPv || 0 }}
								</div>
								<div class="liveContBoxItems_text">
									商品浏览次数
								</div>
							</div>
							<div class='liveContBoxItems'>
								<div class="liveContBoxItems_top">
									{{ overviewData.payUv || 0 }}
								</div>
								<div class="liveContBoxItems_text">
									成交观众数
								</div>
							</div>
							<div class='liveContBoxItems liveContBoxItems_left'>
								<div class="liveContBoxItems_top">
									{{ payProductRateDate }}
								</div>
								<div class="liveContBoxItems_text">
									成交转化率
								</div>
							</div>
						</div>
					</div>

				</div>
				<!--  -->
				<!-- 	<div class="goHome">
					返回首页
				</div> -->
			</div>
		</div>

	</div>
</template>

<script>
export default {
	filters: {
		timeFilter(v) {
			return v
		}
	},
	data() {

		return {
			params: {
				liveId: '',
			},
			overviewData: {

			},
			productCountData: {

			},
			payProductRateDate: '',
			isShowLive: true,
			liveInfo: '',
			liveTime: ''
		}
	},
	onPullDownRefresh() {
		this.getLiveData()
		this.getProductCountFun()
		this.getLiveGet()
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.params.liveId = opt.liveId
		}
		this.getLiveData()
		this.getProductCountFun()
		this.getLiveGet()
	},
	methods: {
		appFinish() {
			this.$utils.appFinish(this)
		},
		backEvent() {
			uni.navigateBack()
		},
		// 获取直播数据源
		async getLiveData() {
			const {
				data
			} = await this.$request(this.$Api.dataLiveGetOverview, this.params, "get")
			if (data.code != 200) return
			this.overviewData = data.data
			this.payProductRateDate = this.payProductRate()
			uni.stopPullDownRefresh()
		},
		// 获取直播信息
		// 获取直播信息
		async getLiveGet() {
			const {
				data
			} = await this.$request(this.$Api.liveGet, this.params, "get")
			if (data.code != 200) return
			// 判断时间是否大于1天
			let nowTime = new Date(data.data.startTime).getTime();
			let preTime = new Date(data.data.endTime).getTime()
			let time = (preTime - nowTime) / 1000;
			let day = parseInt(time / (60 * 60 * 24));
			if (day < 1) {
				data.data.startTimes = data.data.startTime.substring(10, data.data.startTime.length)
				data.data.endTimes = data.data.endTime.substring(10, data.data.endTime.length)
			} else {
				data.data.startTimes = data.data.startTime
				data.data.endTimes = data.data.endTime
			}
			this.$utils.getLiveTimeCount(data.data.startTime, data.data.endTime, (res) => {
				this.liveTime = res
			})
			this.liveInfo = data.data
			uni.stopPullDownRefresh()
		},
		payProductRate() {
			if (this.overviewData.productClickPv) {
				return (
					Math.round(
						(this.overviewData.payProductNum /
							this.overviewData.productClickPv) *
						100
					) + '%'
				);
			}
			return '0%';
		},
		// 获取直播商品数据
		async getProductCountFun() {
			const {
				data
			} = await this.$request(this.$Api.getProductCount, this.params, "get")
			if (data.code != 200) return
			this.productCountData = data.data
			uni.stopPullDownRefresh()
		},
		backBtn() {
			uni.navigateBack()
		},
		copy() {
			uni.setClipboardData({
				data: 'https://b-test.vlebo.cn/', // e是你要保存的内容
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			})
		},
		closeEvnet() {
			this.isShowLive = !this.isShowLive
		},
		// 查看更多
		userEvent(type) {
			if (type == 2) {
				uni.navigateTo({
					url: '/pages/endLive/hotCommodity?liveId=' + this.params.liveId
				})
			} else {
				uni.navigateTo({
					url: '/pages/endLive/liveUserList?liveId=' + this.params.liveId
				})
			}
		}
	}
}
</script>

<style lang="scss">
.endLive {
	width: 100%;
	height: 100vh;
	background: #F6F9FF;
	// overflow: hidden;
}

.endLiveCont {
	width: 100%;
	min-height: 100vh;
	position: relative;
	padding: 80rpx 0;
	box-sizing: border-box;
	color: #464C5B;

	.endLiveCenter {
		width: 100%;
		// height: 1624rpx;
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.bjImg {
		width: 100%;
		// height: 1624rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.endLiveCont_back {
		width: 100%;
		height: 80rpx;
		float: left;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.endLiveCont_back_img {
			width: 50rpx;
			height: 50rpx;
			float: left;
			position: absolute;
			top: 15rpx;
		}
		
		span {
			font-size: 28rpx;
			margin-left: 60rpx;
			color: #1D2129;
			line-height: 80rpx;
		}

		.useLable {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 172rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 2rpx solid #295EFF;
			margin-right: 32rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			color: #295EFF;
			font-size: 24rpx;
			line-height: 44rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.endLiveText {
		font-size: 40rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		margin-top: 12rpx;
	}

	.endLiveTime,
	.endLiveTimeMin {
		font-size: 28rpx;
		color: #DADADA;
		padding: 0 48rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.endLiveTimeMin {
		margin-top: 12rpx;
	}

	.liveLine {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		padding: 0 24rpx;
		box-sizing: border-box;
		width: 686rpx;
		height: 54rpx;
		background: rgba(255, 255, 255, 0.51);
		border-radius: 16rpx;
		margin: 20rpx auto;

		.liveLineClose {
			width: 18rpx;
			height: 18rpx;
			position: absolute;
			left: 24rpx;

			image {
				width: 18rpx;
				float: left;
				height: 18rpx;

			}
		}

		.liveLineText {
			margin-left: 36rpx;
			font-size: 24rpx;
			color: #657180;
		}

		.liveLineCopy {
			position: absolute;
			right: 32rpx;
			// top: 10rpx;
			color: #295EFF;
			font-size: 24rpx;
		}
	}

	.liveData {
		width: 686rpx;
		minheight: 0;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 28rpx 28rpx 28rpx;
		box-sizing: border-box;
		margin-left: 32rpx;

		.liveDataItems {
			width: 100%;
			height: 186rpx;
			padding: 28rpx 0 0 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.liveDataItemsImg {
				width: 224rpx;
				height: 146rpx;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.liveDataItemsCont {
				.liveDataItemsContTop {
					width: 324rpx;
					height: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #464C5B;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.liveDataItemsContCenter {
					height: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #657180;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}

				.liveDataItemsContBottom {
					height: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #657180;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
				}
			}
		}
	}

	// liveContBox
	.liveContBox {
		width: 100%;
		height: 366rpx;
		background: #F6F9FF;
		border-radius: 16rpx;
		margin: 32rpx auto;
		padding: 0 16rpx 0 32rpx;
		box-sizing: border-box;

		.liveContBox_top {
			display: flex;
			align-items: center;
			height: 88rpx;
			justify-content: space-between;
			color: #464C5B;
			font-size: 28rpx;

			.liveContBox_top_left {}

			.liveContBox_top_right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #657180;

				.liveContBox_huo {
					margin-right: 10rpx;
				}

				image {
					width: 32rpx;
					height: 32rpx;

				}
			}
		}

		.liveContBoxItemsCont {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.liveContBoxItems {
				width: 28%;
				margin-bottom: 36rpx;

				.liveContBoxItems_top {
					font-size: 44rpx;
					color: #464C5B;
					line-height: 60rpx;
				}

				.liveContBoxItems_text {
					font-size: 24rpx;
					color: #9F9F9F;
					margin-top: 6rpx;
				}
			}

			.liveContBoxItems_left {
				margin-left: 8%;
			}

		}
	}

	.goHome {
		width: 480rpx;
		height: 80rpx;
		background: #295EFF;
		border-radius: 40rpx;
		margin-top: 124rpx;
		margin: 124rpx auto;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		line-height: 80rpx;
	}
}
</style>